<template>
	<view class="page">
		<view class="list">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item class="u-list-item" v-for="(item, index) in list">
					<view class="flex justify-between">
						<view class="l-con  flex align-center cr-333 font_s26 line-height100">
								<image src="../../static/img/audio_active.png" class="w-35 h-35 mar-right8}"></image><view class="l-text width_1">{{item.title}}</view>
						</view>
						<view class="r-con  cr-999 align-center font_s26">
							<view class="r-text width_1 rc-999 font_s24" >	{{item.createTime}}</view>
						</view>
					</view>
					<view class="font_s24 cr-666 content-box">
						{{item.contentText}}
					</view>
					<view class="font_s26 cr-999 mar-top20 line-height100 flex justify-end">
						<text>
							{{item.lastUpdateTime}}
						</text>
					</view>
				</u-list-item>
		
			</u-list>
		
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total:0
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.reset()
				this.getList(true)
			},
			getList(init){
				if (init || this.total > this.list.length) {
					return this.$http.get(
						`/yaolexue-service-portal/userNotification/pageUserNotification`, {
							limit: 10,
							page: this.page,
						}, ).then(res => {
						console.log(res);
						const datas=res.data.items
						this.list =init?datas:[...this.list,datas]
						this.total = res.data.total
					})
				}
			},
			reset() {
				this.list = []
				this.total = 0
				this.page = 1
			},
			scrolltolower() {
				this.page += 1
				this.getVideoList()
			},
		}
	}
</script>

<style lang='scss'>
	.list {
		background: #fff;
		padding: 0 30rpx;
		.content-box{
			margin-top: 15rpx;
			background-color: #F3F3F3;
			padding: 16rpx 24rpx ;
			 font-weight: 500;
			 line-height: 48rpx;
		}
		.u-list-item {
			padding: 29rpx 0 27rpx 0;
			border-bottom: 1px solid RGBA(240, 240, 240, 0.3);

			.list-item-img {
				margin-top: 19rpx;

				.img-box {
					position: relative;
					width: 220rpx;
					height: 130rpx;
					border-radius: 10rpx;

					&:not(:nth-child(3n)) {
						/* margin-right: 14rpx; */
						margin-right: calc((100% - 660rpx) / 2);
					}
				}

				.play-icon {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.poster {

					width: 100%;
					height: 100%;

				}
			}
		}
	}
</style>
